<%@ page language="java" pageEncoding="UTF-8" %>

	<!DOCTYPE html>
	<html>

	<head>
		<base href="${pageContext.request.contextPath}/">
		<meta charset="utf-8" />
		<title>用户登录_${site}</title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<style>
			#msg,
			#msgdiv {
				display: none;
			}

			/* 弹窗动画 */
			#msg {
				-webkit-animation: fadeleftIn .4s;
				animation: fadeleftIn .4s;
				-webkit-animation-name: popIn;
				animation-name: popIn;
			}

			@-webkit-keyframes popIn {
				0% {
					-webkit-transform: scale3d(0, 0, 0);
					transform: scale3d(0.5, 0.5, 0.5);
					opacity: 0;
				}

				50% {
					-webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
					animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
				}

				100% {
					-webkit-transform: scale3d(1, 1, 1);
					transform: scale3d(1, 1, 1);
					-webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
					animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
					opacity: 1;
				}
			}

			@keyframes popIn {
				0% {
					-webkit-transform: scale3d(0, 0, 0);
					transform: scale3d(0.5, 0.5, 0.5);
					opacity: 0;
				}

				50% {
					-webkit-animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
					animation-timing-function: cubic-bezier(0.47, 0, 0.745, 0.715);
				}

				100% {
					/* -webkit-transform: scale3d(1, 1, 1); */
					/* transform: scale3d(1, 1, 1); */
					-webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
					animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
					opacity: 1;
				}
			}
		</style>
		<script>
			window.addEventListener("load", function () {
				if (${ msg != null }){
				document.getElementById("msg").style.display = "block";
				document.getElementById("msgdiv").style.display = "block";
			}
	})
		</script>
	</head>

	<body class="second">
		<div class="brand_list container_2">
			<jsp:include page="header.jsp"></jsp:include>

			<div class="wrapper clearfix">
				<div class="wrap_box">
					<h3 class="notice">已注册用户，请登录</h3>
					<p class="tips">欢迎来到我们的网站，如果您已是本站会员请登录</p>
					<div class="box login_box clearfix">
						<form action='user?opr=goLogin' method="post">
							<input type="hidden" name="returnURL" value="${referer}" />
							<!-- <input type="hidden" name="opr" value="login" /> -->
							<table width="515" class="form_table f_l">
								<col width="120px" />
								<col />
								<tr>
									<th>账号：</th>
									<td><input class="gray" type="text" name="account" id="login_info"
											placeholder="请输入用户名" value="${userMsg.username}" /><span
											id="namemsg">${namemsg}</span></td>
								</tr>
								<tr>
									<th>密码：</th>
									<td><input class="gray" type="password" id="password" name="password"
											placeholder="请输入6-20位长度的密码" /><span id="pwdmsg"
											value="${userMsg.password}">${pwdmsg}</span></td>
								</tr>
								<tr>
									<td></td>
									<td><input class="submit_login" type="submit" value="登录" /></td>
								</tr>
							</table>
						</form>

						<!--正常登录时-->
						<table width="360px" class="form_table prompt_3 f_l">
							<col width="75px" />
							<col />
							<tr>
								<th></th>
								<td>
									<p class="mt_10">
										<strong class="f14">您还不是<span class="orange">${site}</span>用户
										</strong>
									</p>
									<p>
										现在免费注册成为嗨购商城用户，便能立即享受便宜又放心的购物乐趣。<a class="blue" href="/index">网站首页>></a>
									</p>
									<p class="mt_10">
										<a class="reg_btn" href="user?opr=register">注册新用户</a>
									</p>
								</td>
							</tr>
						</table>
					</div>
				</div>
				<!-- 弹窗代码开始  -->
				<div class="web_notice" id="msgdiv"
					style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,0.3);z-index: 99999;">
					<div id="msg"
						style="position: fixed;top: 50%;left: 50%;width: 550px;background: #FFF;transform: translate(-50%, -50%);border-radius: 40px;padding: 50px 40px;">
						<h3 style="font-weight: bold;text-align: center;font-size: 30px;">登录信息有误</h3>
						<div
							style="font-size: 16px;margin-top: 26px;line-height: 30px;color: rgb(149, 67, 67); text-align: center;font-weight: 600;">
							${msg}
						</div><a
							style="display: block;background: #98a3ff;color: #FFF;text-align: center;font-weight: bold;font-size: 19px;line-height: 60px;margin: 0 auto;margin-top: 45px;border-radius: 32px;width: 80%;"
							onclick="javascript:document.querySelector('.web_notice').remove()">我知道了</a>
					</div>
				</div>
				<!-- 弹窗代码结束  -->
			</div>
			<jsp:include page="footer.jsp"></jsp:include>
		</div>
	</body>

	</html>